<template>
<div v-if="!task" class="text-xs-center p-y-1">{{$t('Const.Loading')}}</div>
<div class="card m-b-0" v-if="task">
	<list-header
		:link="{name: 'resultList'}"
		:title="$case.name"
		:subtitle="$case.comment || 'case:' + $case.name"></list-header>
	<div class="card-block">
		<table class="table table-bordered text-small">
			<thead>
				<th>{{$t("CaseView.Table.ins")}}</th>
				<th class="hidden-xs-down" style="width:8rem">
					{{$t("CaseView.Table.time")}}
				</th>
			</thead>
			<tbody>
				<tr v-for="log in logList">
					<td
						@click="viewLine(log.line)"
						:class="{clickable: log.line>0}">
						<div class="log-body text-truncate">{{log.body | logBody}}</div>
					</td>
					<td class="hidden-xs-down">{{log.time | time}}</td>
				</tr>
			</tbody>
		</table>
	</div>
	<div class="card-footer">
		<div class="card-text">
			<div v-code="$case.code" v-code-mark="lineSelected">
				{{$t('Const.Loading')}}
			</div>
		</div>
	</div>
</div>
</template>

<script>
import ListHeader from '../component/ListHeader.vue';
import {getTask, getResultList} from '../resource';
import RP from 'lemonce-result-parser';
import Promise from 'bluebird';

export default {
	components: {ListHeader},
	data: function () {
		return {
			lineSelected: -1,
			task: null,
			resultId: -1,
			resultList: []
		};
	},
	route: {
		data: async function ({to: {params, query}}) {
			var resultId = Number(query.resultId);
			if (!Number.isFinite(resultId)) {
				return Promise.resolve(null);
			}

			var task = await getTask(params.taskId);
			var resultList = await getResultList(params.projectId, params.taskId);

			return {task, resultId, resultList, lineSelected: -1};
		}
	},
	methods: {
		viewLine: function (line) {
			if (line < 1) {
				return;
			}
			// reset if clicked twice
			if (this.lineSelected === line) {
				this.lineSelected = -1;

				return;
			}

			this.lineSelected = line;
		}
	},
	computed: {
		loop: function () {
			return 0; // #TIMES is always 1 now
		},
		$case: function () {
			if (this.task) {
				return this.task.schemas.caseList[this.$route.params.caseIndex];
			}

			return null;
		},
		report: function () {
			if (this.task && this.resultList.length) {
				var resOpts = {name: 's13', tR: []};

				this.resultList.forEach(function (result) {
					resOpts.tR.push({
						data: JSON.parse(result.data)
					});
				});

				return new RP(this.task, resOpts).$resultList;
			}

			return null;
		},
		// computed from report
		logList: function () {
			var r = this.report;
			if (!r) {
				return [];
			}

			// todo we should pass index of result instead
			var resultId = this.resultId;
			var resultIndex = this.resultList.reduce(function (prev, result, index) {
				return result.resultId == resultId ? index : prev;
			}, 0);

			return r[resultIndex] // current result
				.$caseResultList[this.$route.params.caseIndex] // current case
				.$executionLog[this.loop].slice(0); // make a cheap copy
		}
	}
}
</script>

<style scoped lang="postcss">
.log-body {
	max-width: 14rem;
}
@media (width >= 480px) {
	.log-body {
		max-width: 22rem;
	}
}
@media (width >= 1000px) {
	.log-body {
		max-width: 40rem;
	}
}
</style>
